<template>
    <el-container class="account-container" direction="vertical">
        <el-container>
            <HeaderBtnGroup @handleClick="handleHeaderClick" :config="headerConfig">
            </HeaderBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table :data="targets" v-loading="loadingShow">
                    <el-table-column fixed label="序号" type="index"></el-table-column>
                    <el-table-column fixed label="编号" prop="id"></el-table-column>
                    <el-table-column label="平台" prop="platform">
                        <template slot-scope="scope">
                            <span>{{ platformComputed(scope.row.platform) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="usage == 0" label="作用范围" prop="usageScope">
                        <template slot-scope="scope">
                            <span>{{ usageScopeComputed(scope.row.usageScope) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="帐号" prop="account"></el-table-column>
                    <el-table-column label="密码" prop="password"></el-table-column>
                    <el-table-column label="生效/失效" prop="enable">
                        <template slot-scope="scope">
                            <span>{{ scope.row.enable ? "生效" : "失效" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
        <el-dialog title="添加帐号" :visible.sync="dialogFormVisible" destroy-on-close @close="handleDialogClose"
            width="500px">
            <el-form :model="form" ref="addForm" label-position="right" :rules="rules">
                <el-form-item label="平台" :label-width="formLableWidth">
                    <el-select v-model="form.platform" placeholder="请选择平台">
                        <el-option v-for="item in platforms" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="usage == 0" label="作用范围" :label-width="formLableWidth">
                    <el-select v-model="form.usageScope" placeholder="请选择范围">
                        <el-option v-for="item in usageScopes" :key="item.id" :value="item.id"
                            :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-container class="radio-container">
                    <el-form-item label="生效" class="direction-hor" :label-width="formLableWidth">
                        <el-switch v-model="form.enable"></el-switch>
                    </el-form-item>
                    <el-form-item label="需要登录" class="direction-hor" label-width="170px">
                        <el-switch v-model="form.login"></el-switch>
                    </el-form-item>
                </el-container>
                <el-form-item v-if="form.login" label="帐号" :label-width="formLableWidth">
                    <el-input v-model="form.account" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item v-if="form.login" label="密码" :label-width="formLableWidth">
                    <el-input v-model="form.password" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item v-if="form.login" label="路径" :label-width="formLableWidth">
                    <el-input v-model="form.loginUrl" size="mini"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="addData('addForm')" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<style lang="scss">
.account-container {
    .el-dialog__body {
        padding: 0px 15px;
    }

    .el-dialog__footer {
        padding-top: 0px;
    }

    .radio-container {
        margin-left: 0px;
        margin-bottom: 18px;

        .direction-hor {
            display: inline-block;
            width: 100px;
            margin-bottom: 0px !important;

            .el-form-item__label {
                width: auto;
            }

            .el-form-item__content {
                width: auto;
            }
        }
    }

}
</style>

<script>
import { DictDao } from "@/dao/dictDao"
import { AccountDao } from '@/dao/accountDao'
import { HeaderBtnMixin } from "@/mixins/HeaderBtnMixin"
import { DictType, UsageScope } from "@/entities/Constant"
import HeaderBtnGroup from "@/components/Common/HeaderBtnGroup"

export default {
    name: "Account",
    mixins: [HeaderBtnMixin],
    props: {
        usage: {
            type: Number,
            default: 0,
        },
    },
    components: {
        HeaderBtnGroup,
    },
    data() {
        return {
            targets: [],
            platforms: [],
            loadingShow: true,
            formLableWidth: "100px",
            rules: AccountDao.rules(),
            usageScopes: UsageScope.Options(),
            form: AccountDao.initialForm(true, this.usage),
            headerConfig: {
                showPage: false,
                statusBtns: [],
            },
        }
    },
    mounted() {
        DictDao.Platforms(DictType.Platform, this.usage).then(res => {
            this.platforms = res
            this.getTargets()
        })
    },
    methods: {
        getTargets() {
            this.loadingShow = true
            AccountDao.fetchAll(this.usage).then(res => {
                this.loadingShow = false
                if (res) this.targets = res
            })
        },
        handleEdit(row) {
            this.form = AccountDao.fixBoolRow(row)
            this.dialogFormVisible = true
        },
        handleDelete(id) {
            AccountDao.delete(id).then(() => {
                this.getTargets()
            })
        },
        handleDialogClose() {
            this.$nextTick(() => {
                this.form = AccountDao.initialForm(this.form.login, this.usage)
            })
        },
        addData(formName) {
            const formData = this.form
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false
                    AccountDao.save(formData).then(() => {
                        this.getTargets()
                    })
                }
            })
        },
        usageScopeComputed(value) {
            let o = this.usageScopes.find(obj => obj.id == value)
            return o.name
        },
        platformComputed(value) {
            let obj = this.platforms.find(obj => obj.id == value)
            return obj ? obj.name : ""
        }
    },
    filters: {},
}
</script>
